<template>
  <div></div>
</template>

<script>
import localStorage from "@/utils/localStorage";
import L from "leaflet";
import "leaflet-polylinedecorator";
export default {
  computed: {
    SearchLayersNodes() {
      return this.$store.state.config.SearchLayersNodes;
    },
    searchstakesFeatureGroup() {
      return this.$store.state.searchstakesFeatureGroup;
    },
    map() {
      return this.$store.state.map;
    },
  },
  data() {
    return {
      SearchDictionary: JSON.parse(localStorage.get("SearchDictionary")),
    };
  },
  methods: {
    lineToMap(line) {
      let self = this;
      L.geoJSON(line, {
        style: function () {
          return { color: "blue", stroke: true, weight: 4 };
        },
      })
        .bindPopup(function (layer) {
          return self.buildPopupInfo(layer.feature.properties);
        })
        .addTo(this.searchstakesFeatureGroup);
      this.map.flyToBounds(this.searchstakesFeatureGroup.getBounds());
    },
    route2map(latlngsArray) {
      this.searchstakesFeatureGroup.clearLayers();
      let lineOptions = {
        color: "#556B2F",
        weight: 8,
      };
      console.log(latlngsArray);
      let i = 0;
      let latlngs = [];

      latlngsArray.map((item) => {
        latlngs.push([]);
        item.map((item) => {
          latlngs[i].push([item[1], item[0]]);
        });
        i++;
      });
      let routeLine = L.polyline(latlngs, lineOptions).addTo(
        this.searchstakesFeatureGroup
      );
      console.log(latlngs);
      // 轨迹方向箭头
      L.polylineDecorator(routeLine, {
        patterns: [
          {
            repeat: 50,
            symbol: L.Symbol.arrowHead({
              pixelSize: 5,
              headAngle: 75,
              polygon: false,
              pathOptions: {
                stroke: true,
                weight: 2,
                color: "#FFFFFF",
              },
            }),
          },
        ],
      }).addTo(this.searchstakesFeatureGroup);
      this.map.flyToBounds(routeLine.getBounds());
    },
    pointToMap(features) {
      if (this.geosonfeatureid) {
        this.searchstakesFeatureGroup.getLayer(this.geosonfeatureid)
          ? this.searchstakesFeatureGroup
              .getLayer(this.geosonfeatureid)
              .remove()
          : "";
      }
      let latlngpoint = null;
      let icon = L.icon({
        iconSize: [35, 40],
        iconUrl: "./img/icons/stakepoint.png",
      });
      let geosonfeature = L.geoJSON(features, {
        pointToLayer: function (geoJsonPoint, latlng) {
          latlngpoint = latlng;
          return L.marker(latlng, {
            icon: icon,
          });
        },
      }).addTo(this.searchstakesFeatureGroup);
      this.geosonfeatureid =
        this.searchstakesFeatureGroup.getLayerId(geosonfeature);
      latlngpoint ? this.map.flyToBounds(geosonfeature.getBounds()) : "";
    },
    featuresToMap(features) {
      let self = this;
      let latlngpoint = null;
      let icon = L.icon({
        iconSize: [35, 40],

        iconUrl: "./img/icons/stake.png",
      });
      let geosonfeature = L.geoJSON(features, {
        style: function () {
          return { color: "blue", weight: 4 };
        },
        pointToLayer: function (geoJsonPoint, latlng) {
          latlngpoint = latlng;
          return L.marker(latlng, {
            icon: icon,
          });
        },
      })
        .bindPopup(function (layer) {
          return self.buildPopupInfo(layer.feature.properties);
        })
        .addTo(this.searchstakesFeatureGroup);
      this.map.flyToBounds(this.searchstakesFeatureGroup.getBounds());
      latlngpoint ? this.map.flyToBounds(geosonfeature.getBounds()) : "";
    },
    buildPopupInfo(record) {
      let content = `<div class="ant-table ant-table-scroll-position-left ant-table-small" style="max-height: 200px;overflow-y: scroll;  border:none;cursor: pointer;">
      					     <div class="ant-table-content">
      					       <div class="ant-table-body">
      					         <table class="">
      					           <thead class="ant-table-thead">
      					           <tr>
      					             <th  class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">属性名</span><span class="ant-table-column-sorter"></span></div></span></th>
      					             <th  class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">属性值</span><span class="ant-table-column-sorter"></span></div></span></th>
      					           </tr>
      					           </thead>
      					           <tbody class="ant-table-tbody">`;
      for (let key in record) {
        if (!key.startsWith("Sm")) {
          // 匹配字典表
          let cname = key;
          for (let dict of this.SearchDictionary) {
            if (dict.ename.toUpperCase() == key.toUpperCase()) {
              cname = dict.cname;
              if (record[key] && record[key] != "") {
                // console.log(event.layer.properties.attributes[item]);
                content += `            <tr class="ant-table-row ant-table-row-level-0">
      					                 <td class="" style="border:none">${cname}</td>
      					                 <td class="" style="border:none">${record[key]}</td>
      					               </tr>`;
              }
            }
          }
        }
      }
      content += `
      					           </tbody>
      					         </table>
      					       </div>
      					     </div>
      					   </div>`;
      return content;
    },
  },
};
</script>

<style></style>
